<template>
  <header class="form-container save-page-container" id="save-page-container">
    <el-form ref="form" :model="notice" :rules="rules" label-width="100px">

      <div class="header">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span v-text="title"></span>
        </div>
        <el-form-item>
          <el-button type="success" :loading="submitLoading" @click="submitForm('form')">保存</el-button>
          <el-button type="default" @click="goBack">返回</el-button>
        </el-form-item>
      </div>

      <!--      <el-form-item class="btns">
              <el-button type="success" :loading="submitLoading" @click="submitForm('form')">保存</el-button>
              <el-button type="default" @click="goBack">返回</el-button>
            </el-form-item>-->
      <el-form-item label="标题:" prop="noticeTitle">
        <el-input v-model.trim="notice.noticeTitle" maxlength="100" placeholder="请输入标题"/>
      </el-form-item>

      <el-form-item label="类型:" prop="noticeType">
        <el-radio v-model="notice.noticeType" :label="1">通知</el-radio>
        <el-radio v-model="notice.noticeType" :label="0">公告</el-radio>
      </el-form-item>

      <el-form-item label="信息有效期:" prop="startTime" class="addTag">
        <el-date-picker
          v-model="dateArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :picker-options="pickerOptions"
        />
      </el-form-item>

      <el-form-item prop="noticeContent" label="内容:" style="margin-bottom: 30px;">
        <Tinymce ref="editor" v-model="notice.noticeContent" :height="400"/>
      </el-form-item>
<!--TongZhiFile-->
      <el-form-item label="附件">
        <el-upload
          class="upload-demo"
          :action="uploadHost+'/fileUpload/upload?fileType=TongZhiFile'"
          multiple
          :limit="10"
          :before-upload="beforeUpload"
          :on-success="uploadSuccess"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip"><i class="el-icon-warning"></i>文件大小请勿超过2MB</div>
        </el-upload>
      </el-form-item>

    </el-form>

  </header>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import MDinput from '@/components/MDinput'
  import noticeAPI from '@/api/portal/notice'
  import departmentAPI from '@/api/system/department'
  import { mapGetters } from 'vuex'

  export default {
    name: 'NoticeCommon',
    components: { Tinymce, MDinput },
    data() {
      const valiDate = (rule, value, callback) => {
        if (this.dateArr.length === 0) {
          callback(new Error('请选择信息有效期'))
        } else {
          callback()
        }
      }
      return {
        notice: {
          noticeId: this.$route.params.id,
          noticeTitle: '',
          noticeContent: '',
          noticeType: 1,
          pubUser: '',
          startTime: '',
          endTime: '',
          fileList:[]
        },
        dateArr: [],
        pickerOptions: {
          shortcuts: [{
            text: '一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        rules: {
          noticeTitle: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          noticeType: [
            { required: true, message: '请输入标题', trigger: 'change' }
          ],
          startTime: [
            { validator: valiDate, trigger: 'change' }
          ],
          noticeContent: [
            { required: true, message: '请输入内容', trigger: 'blur' }
          ]

        },
        submitLoading: false,
        fileList:[],
      }
    },
    created() {
      if (this.notice.noticeId) {
        this.fetchData()
      }
    },
    computed: {
      ...mapGetters([
        'userId',
        'uploadHost'
      ]),
      title() {
        return this.notice.noticeId ? '通知公告修改' : '通知公告添加'
      }
    },
    methods: {
      fetchData() {
        noticeAPI.getById(this.notice.noticeId).then(res => {
          const result = res.result
          this.notice = res.result
          this.notice.noticeType = result.noticeType === '通知' ? 1 : 0
          this.dateArr.push(this.notice.startTime)
          this.dateArr.push(this.notice.endTime)
        }).catch(err => {
          console.log(err)
        })
      },
      submitForm(form) {
        this.$refs[form].validate(valid => {
          if (!this.submitLoading && valid) {
            this.saveOrUpdate()
          }
        })
      },
      goBack() {
        this.$router.back()
      },
      saveOrUpdate() {
        this.submitLoading = true
        this.notice.startTime = this.dateArr[0]
        this.notice.endTime = this.dateArr[1]
        this.notice.pubUser = this.userId
        console.log(this.notice)
        const promise = this.notice.noticeId ? noticeAPI.update(this.notice) : noticeAPI.save(this.notice)
        promise.then(res => {
          this.$message.success('添加成功')
          this.submitLoading = false
          this.$router.push('/portal/notice-list')
        }).catch(err => {
          this.submitLoading = false
          console.log(err)
        })
      },
      beforeUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.info('文件大小请勿超过 2MB!')
        }
        return isLt2M
      },
      uploadSuccess(res, file){
        this.notice.fileList.push(res.result)
      }
    }
  }
</script>

<style  lang="scss">
  #save-page-container {
    .addTag {
      .el-form-item__label::before {
        content: '*';
        color: #ff4949;
        margin-right: 4px;
      }
    }
  }

</style>
